<template>
  <div class="history-main">
    <!-- 通用头部 -->
    <div class="com-header history-header">
        <button class="back" @click="$router.go(-1)"><i></i></button>
        <span>浏览历史</span>
        <button class="clear-all" @click="clearHistory">清除全部</button>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content">
       <div class="wrapper">
            <ul>
                <router-link tag="li" :to="'/novelDetail/'+item.novelid" v-for="(item,index) in dataArr" :key="index">
                    <div class="left"><img :src="item.coverimg" :alt="item.name"></div>
                    <div class="right">
                        <p class="ellipsis title">{{item.name}}</p>
                        <p class="ellipsis">{{item.author}}</p>
                        <p class="ellipsis">{{item.intro}}</p>
                        <p class="ellipsis">{{item.readernum}}人在追 | {{item.novelRetain}}读者留存</p>
                    </div>
                </router-link>
            </ul>
       </div>
    </div>
  </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import api from '~/plugins/api.js'
    import axios from 'axios'
    import storage from 'localforage'
    export default {
        head: {
            title: '浏览历史  - 快眼看书',
            meta: [{
                name: 'description',
                content: '快眼看书专注于玄幻小说搜索,新版快眼看书,提供最全的小说保持最快的更新,方便大家愉快地阅读玄幻小说'
            },{
                name: 'keyWords',
                content: '浏览历史,快眼看书'
            }]
        },
        data () {
            return {
              dataArr: []
            }
        },
        mounted() {
            this.initData()
        },
        methods: {
            clearHistory () {    
                storage.removeItem('saveReadHistoryKey')
                this.dataArr = []
            },
            async initData() {
                let arr = await storage.getItem('saveReadHistoryKey') || []
                let ids = ''
                if(arr.length){
                    ids = arr.join()
                }
                let result = await axios.get(api.unLogin,{params:{novelId:ids}})
                if(result){
                    this.dataArr = result.data.data
                }
            }
        }
    }
</script>
